<template>
	<view>
		<view class="w100">
			<view class="w100" style="display: flex;align-items: center;" @click="step">
				<image style="width: 138rpx;height: 138rpx;border-radius: 50%;margin-right: 30rpx;"
					:src="userInfo.avter" mode="aspectFill"></image>
				<view style="width: 75%;">
					<view class="flex-b">
						<view class="">
							<view style="display: flex;align-items: center;">
								<view class="s1">
									{{userInfo.share_code}}
								</view>
								<image style="width: 156rpx;height: 36rpx;" src="../../static/user/user3.png" mode="">
								</image>
							</view>
						</view>
						<u-icon name="arrow-right" color="#fff"></u-icon>
					</view>
					<view class="s2 mt-15">
						手机号: {{userInfo.user_phone}}
					</view>
				</view>
			</view>
			<!-- 账户余额 -->
			<view class="gradientCard mt-30">
				<view class="  p-x-40 p-y-20   flex-b w100">
					<view class="" @click="gobalance">
						<view class="s3">
							账户余额
						</view>
						<view class="s1 mt-10">
							{{userInfo.money||0}}
						</view>
					</view>
					<view class="" @click="goyesterdayIncome">
						<view class="s3">
							昨日收益
						</view>
						<view class="s1 mt-10">
							{{userInfo.yesterday_money||0}}
						</view>
					</view>
					<view class="" @click="gotodayIncome">
						<view class="s3">
							今日收益
						</view>
						<view class="s1 mt-10">
							{{userInfo.today_money||0}}
						</view>
					</view>
				</view>
			</view>

			<!-- USDT -->
			<view class="gradientCard mt-20">
				<view @click="goustdCenter" class="  p-x-40 p-y-20   w100 flex-b">
					<view class="" style="display: flex;align-items: center;">
						<image style="width: 80rpx;height: 80rpx;" src="../../static/user/user6.png" mode=""></image>
						<view style="margin-left: 30rpx;">
							<view class="s3">
								TetherUS
							</view>
							<view class="s4 mt-10">
								USDT
							</view>
						</view>
					</view>
					<view class="">
						<view class="s3">
							{{userInfo.money||''}}
						</view>
						<!-- <view class="s4 mt-10">
							$1.43578
						</view> -->
					</view>
				</view>
			</view>

			<!-- ytb -->
			<view class="gradientCard  mt-20">
				<view @click="goytbCenter" class="  p-x-40 p-y-20   w100 flex-b">
					<view class="" style="display: flex;align-items: center;">
						<image style="width: 80rpx;height: 80rpx;" src="../../static/user/user5.png" mode=""></image>
						<view style="margin-left: 30rpx;">
							<view class="s3">
								YTB
							</view>
							<view class="s4 mt-10">
								youtubi
							</view>
						</view>
					</view>
					<view class="">
						<view class="s3">
							{{userInfo.ytc_money||'0'}}
						</view>
						<!-- 	<view class="s4 mt-10">
							$1.43578
						</view> -->
					</view>
				</view>
			</view>

			<!-- 切换 -->
			<view class="top mt-20 mb-20" style="display: flex;align-items: center;">

				<view @click.stop="changeLeftTab(index)" class="flex-center"
					:class="index==curTab?'top_box1':'top_box2'" v-for="(item,index) in cateGoodslist" :key="index">
					{{item.name}}
				</view>
			</view>

			<!-- 总换 -->
			<view class="gradientCard">
				<view class="  p-x-40 p-y-30  ">
					<view class="w100 flex-b" style="align-items: flex-start;">
						<view class="" style="width: 40%;">
							<view class="flex-b w100">
								<view style="display: flex;align-items: center;">
									<image style="width: 50rpx;height: 50rpx;" :src="curTab==0?YTBimg:USDTimg" mode="">
									</image>
									<view class="s3 ml-15">
										{{curTab==0?'YTB':'USDT'}}
									</view>
								</view>
								<!-- 	<view class="">
									<image style="width: 24rpx;height: 24rpx;" src="../../static/user/down.png" mode=""></image>
								</view> -->
							</view>
							<view class="w100 mt-40 mb-20" style="background-color:rgba(255, 90, 117, 1);height: 2rpx;">
							</view>
							<view class="body w100">
								<view class="s5">
									余额{{curTab==0? (userInfo.ytc_money||'0') :(userInfo.money||'0')}}
								</view>

								<view class="flex-b w100 mt-10">
									<view style="font-size: 36rpx;font-weight: 700;color: #fff;" class="flex1 mr-10">
										<!-- input -->
										<u-input placeholder="请输入" border="none" v-model="inputValue" color="#fff"
											type="number"></u-input>
									</view>
									<view class="max flex-center" @click="handleMax">
										MAX
									</view>
								</view>
							</view>
						</view>


						<!-- 左侧 -->
						<view class="flex mt-80" style="align-items: center;height:100%;">
							<image style="width: 32rpx;height: 32rpx;" src="../../static/user/jiao.png"
								mode="aspectFill">
							</image>
						</view>
						<!-- 右侧 -->


						<view class="" style="width: 40%;">
							<view class="flex-b w100">
								<view style="display: flex;align-items: center;">
									<image style="width: 50rpx;height: 50rpx;" :src="curTab==1?YTBimg:USDTimg" mode="">
									</image>
									<view class="s3 ml-15">
										{{curTab==1?'YTB':'USDT'}}
									</view>
								</view>
								<!-- <view class="">
									<image  style="width: 24rpx;height: 24rpx;" src="../../static/user/down.png" mode=""></image>
								</view> -->
							</view>
							<view class="w100 mt-40 mb-20" style="background-color:rgba(255, 90, 117, 1);height: 2rpx;">
							</view>
							<view class="body w100">
								<view class="s5"> 得到 </view>

								<view class="flex-b w100 mt-10">
									<view style="font-size: 36rpx;font-weight: 700;color: #fff;word-break: break-all"
										class="w100">
										{{result||'0'}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="w100 flex-b mt-20">
						<view class="s2">
							参考汇率
						</view>
						<view class="s2">
							{{curTab==0? (setting.usdt_dui) :(setting.ytb_dui)}}
						</view>
					</view>
					<view class="w100 flex-b mt-20">
						<view class="s2">
							手续费
						</view>
						<view class="s2">
							{{curTab==0? (setting.usdt_dui_fee) :(setting.ytb_dui_fee)}}
						</view>
					</view>
					<view class="w100 flex-b mt-20">
						<view class="s2">
							预计得到
						</view>
						<view class="s2">
							{{result||'0'}}
						</view>
					</view>
					<view class="s3 but mt-40" @click.stop="zhu">
						{{curTab==0?'兑换USTD':'兑换TYB'}}
					</view>
				</view>
			</view>


			<!-- 我的 -->
			<view class="gradientCard mt-20">
				<view class="  p-x-40 p-y-30  ">
					<view @click="gootherPage(item)" class="" v-for="(item,index) in mylist" :key="index">
						<view class="flex-b w100">
							<view style="display: flex;align-items: center; ">
								<image style="width: 50rpx;height: 50rpx;" :src="item.url" mode=""></image>
								<view class="s3 ml-20" style="font-size: 28rpx;">
									{{item.name}}
								</view>
							</view>
							<u-icon name="arrow-right" color="rgba(120, 130, 142, 1)" size="16"></u-icon>
						</view>
						<view class="mt-24 mb-24" style="background-color: rgba(247, 247, 247, 0.5);height: 2rpx;"
							v-if="index<mylist.length-1">

						</view>
					</view>
				</view>
			</view>

		</view>

		<u-popup :show="show" mode="center">
			<view style="width: 680rpx;background: rgba(39, 44, 82, 1);" class="p-x-40 p-y-40 ">
				<view class="w100 flex-center  mb-20" style="font-size: 32rpx;font-weight: 500;color: #fff;">
					交易密码
				</view>

				<view class="mt-30">
					<u--input type="password" color='#fff' placeholder="请输入密码"  border="surround"
						v-model="pay_pass"></u--input>
				</view>

				<view class="flex-b mt-40">
					<view class="but1 flex-center" @click="show=false">
						取消
					</view>
					<view class="but2 flex-center" style="" @click="sumit">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputValue:"",
				pay_pass:'',
				info: {
					nums: ''
				},
				show: false,
				avter: '',
				nickname: '',
				user_phone: '',
				YTBimg: '../../static/user/YTB.png',
				USDTimg: '../../static/user/USDT.png',
				mylist: [{
						name: '商家入驻',

						url: '../../static/user/my1.png'
					},
					{
						name: '账号设置',
						url: '../../static/user/my2.png',
						target: '/pages/uset/step/step',
					},
					{
						name: '邀请好友',
						url: '../../static/user/my3.png',
						target: '/pages/index/invite',
					},
					{
						name: '我的团队',
						target: '/pages/uset/recommendation',
						url: '../../static/user/my4.png'
					},
					{
						name: '我的设备',
						url: '../../static/user/my5.png',
						target: '/pages/device/device',
						type: 2,
					},
					{
						name: '联系客服',
						url: '../../static/user/my6.png'
					}
				],
				curTab: 0,

				cateGoodslist: [{
						name: '兑换USDT'
					},
					{
						name: '兑换YTB'
					}
				]
			}
		},
		computed: {
			result() {
				let value = Number(this.inputValue)
				if (value && Number(value) > 0) {
					let result = value || 0
					let feeBili = 0
					let bili = 0
					if (this.curTab == 0) { //兑换usdt
						feeBili = Number(this.setting.usdt_dui_fee)
						bili = Number(this.setting.usdt_dui)
					} else if (this.curTab == 1) {
						feeBili = Number(this.setting.ytb_dui_fee)
						bili = Number(this.setting.ytb_dui)
					}
					result -= result * feeBili
					result *= bili
					return parseFloat(result).toFixed(2)
				}
				return 0
			}
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.getUserInfo()
				this.getSetting()
			}
		},
		methods: {
			handleMax() {
				this.inputValue = this.curTab == 0 ? (this.userInfo.ytc_money || '0') : (this.userInfo.money || '0')
			},
			async zhu() {
				this.show = true
			},
			async sumit() {
				if (!this.inputValue) {
					uni.$u.toast('请输入数量')
					return
				}
				if (!this.pay_pass) {
					uni.$u.toast('请输入密码')
					return
				}
				
				let url = ''
				if (this.curTab == 0) {
					url = 'user/ytb_to_usdt'
				} else {
					url = 'user/usdt_to_ytb'
				}

				let res = await this.$http.post(url, {
					nums : this.inputValue,
					pay_pass:this.pay_pass
				})
				if (res.code == 200) {
					uni.$u.toast('操作成功')
					this.getUserInfo()
					setTimeout(() => {
						this.show = false
					}, 500)

				} else {
					uni.$u.toast(res.msg)
				}
			},
			step() {
				uni.navigateTo({
					url: '/pages/uset/step/step'
				})
			},
			gootherPage(item) {

				if (item.target) {
					return this.$tools.jumpTo(item.target, item.type || 1)
				}
				if (item.name == '商家入驻') {
					return uni.$u.toast('暂未开发')
				}
				if (item.name == '联系客服') {

					if (this.setting.kefu_url) {
						if (this.userInfo && this.userInfo.user_id) {
							let arr = this.setting.kefu_url.split('/')
							let u = arr[arr.length - 1]
							let domain = this.setting.kefu_url.split('/kefu/')[0]
							// "https://chatim5.kuyouyun.com/kefu/65a0e15fb82e8"
							let path = encodeURIComponent(
								`${domain}/index/index/kefu?u=${u}&uid=${this.userInfo.user_id}&name=${this.userInfo.nickname}&avatar=${this.userInfo.avter}`
							)
							// #ifdef H5
							window.open(decodeURIComponent(path))
							return
							// #endif 
							url = `/pages/webview/webview?src=${path}`
						} else {
							// #ifdef H5
							window.open(this.setting.kefu_url)
							return
							// #endif

							url = `/pages/webview/webview?src=${encodeURIComponent(this.setting.kefu_url)}`
						}
					}
				}

			},
			goytbCenter() {
				uni.navigateTo({
					url: '/pages/uset/ytbCenter/ytbCenter?type=YTB'
				})
			},
			goustdCenter() {
				uni.navigateTo({
					url: '/pages/uset/usdtCenter/usdtCenter?type=USDT'
				})
			},
			gotodayIncome() {
				uni.navigateTo({
					url: '/pages/uset/todayIncome'
				})
			},
			goyesterdayIncome() {
				uni.navigateTo({
					url: '/pages/uset/yesterdayIncome'
				})
			},
			gobalance() {
				uni.navigateTo({
					url: '/pages/uset/balance'
				})
			},
			changeLeftTab(id) {
				this.curTab = id
			},
			//切换
			zhuan() {
				console.log(this.curTab);
				if (this.curTab == 0) {
					this.curTab = 1
				} else {
					this.curTab = 0
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #1E2240;
		padding: 30rpx;
	}

	.but1 {
		width: 240rpx;
		height: 80rpx;
		background-color: #fff;
		border-radius: 8rpx;
		background: #EEEEEE;
		font-size: 30rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.but2 {
		width: 240rpx;
		height: 80rpx;
		border-radius: 8rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #fff;
		background: linear-gradient(266.84deg, #0014FF 0%, #801FF0 50%, #FF2CDF 100%);
	}

	.s1 {
		font-size: 36rpx;
		font-weight: 500;
		color: #fff;
	}

	.s2 {
		font-size: 24rpx;
		font-weight: 400;
		color: #fff;
	}

	.s3 {
		font-size: 32rpx;
		font-weight: 400;
		color: #fff;
	}

	.s4 {
		font-size: 24rpx;
		font-weight: 400;


		color: rgba(223, 223, 223, 1);
	}

	.s5 {
		font-size: 20rpx;
		font-weight: 400;
		color: #fff
	}

	.top {
		padding: 0 10rpx;
		height: 112rpx;
		opacity: 1;
		border-radius: 60rpx;
		background: rgba(15, 17, 34, 1);
	}

	.top_box1 {
		width: 50%;
		height: 96rpx;
		opacity: 1;
		border-radius: 50rpx;
		background: rgba(40, 44, 74, 1);
		font-size: 28rpx;
		font-weight: 500;
		color: rgba(147, 149, 164, 1);
	}

	.top_box2 {
		width: 50%;
		height: 96rpx;
		opacity: 1;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: rgba(147, 149, 164, 1);
	}

	.body {

		border-radius: 10rpx;
		background: rgba(47, 44, 105, 1);
		padding: 20rpx;
	}

	.max {
		width: 64rpx;
		height: 24rpx;
		opacity: 1;
		border-radius: 20rpx;
		background: rgba(78, 136, 224, 1);
		font-size: 20rpx;
		font-weight: 700;

		color: rgba(255, 255, 255, 1);
	}

	.but {
		width: 628rpx;
		height: 80rpx;
		opacity: 1;
		border-radius: 100rpx;
		background: linear-gradient(266.84deg, rgba(0, 20, 255, 1) 0%, rgba(128, 31, 240, 1) 50%, rgba(255, 44, 223, 1) 100%);
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 32rpx 64rpx 32rpx 64rpx;
	}
</style>